<template>
  <div class="settings-page">
    <a-page-header title="系统设置" sub-title="配置系统参数和功能">
      <template #extra>
        <a-space>
          <a-button @click="handleRefresh">
            <template #icon><reload-outlined /></template>
            刷新
          </a-button>
          <a-button type="primary" @click="handleSaveAll">
            <template #icon><save-outlined /></template>
            保存所有配置
          </a-button>
        </a-space>
      </template>
    </a-page-header>

    <!-- 配置分类Tab -->
    <a-card class="card-shadow">
      <a-tabs v-model:activeKey="activeTab" type="card">
        <!-- 基础设置 -->
        <a-tab-pane key="basic" tab="基础设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="网站名称">
              <a-input 
                v-model:value="configs.siteName" 
                placeholder="请输入网站名称"
              />
            </a-form-item>
            <a-form-item label="网站Logo">
              <a-upload
                list-type="picture-card"
                :show-upload-list="false"
                :before-upload="beforeUpload"
              >
                <img v-if="configs.siteLogo" :src="configs.siteLogo" style="width: 100px;" />
                <div v-else>
                  <plus-outlined />
                  <div style="margin-top: 8px">上传</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item label="客服电话">
              <a-input 
                v-model:value="configs.servicePhone" 
                placeholder="请输入客服电话"
              />
            </a-form-item>
            <a-form-item label="客服邮箱">
              <a-input 
                v-model:value="configs.serviceEmail" 
                placeholder="请输入客服邮箱"
              />
            </a-form-item>
            <a-form-item label="网站备案号">
              <a-input 
                v-model:value="configs.icp" 
                placeholder="请输入网站备案号"
              />
            </a-form-item>
            <a-form-item label="网站描述">
              <a-textarea 
                v-model:value="configs.siteDescription" 
                placeholder="请输入网站描述"
                :rows="3"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 支付设置 -->
        <a-tab-pane key="payment" tab="支付设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-divider orientation="left">微信支付</a-divider>
            <a-form-item label="启用微信支付">
              <a-switch v-model:checked="configs.wechatPayEnabled" />
            </a-form-item>
            <a-form-item label="商户号">
              <a-input 
                v-model:value="configs.wechatMerchantId" 
                placeholder="请输入微信商户号"
              />
            </a-form-item>
            <a-form-item label="API密钥">
              <a-input-password 
                v-model:value="configs.wechatApiKey" 
                placeholder="请输入微信API密钥"
              />
            </a-form-item>

            <a-divider orientation="left">支付宝支付</a-divider>
            <a-form-item label="启用支付宝">
              <a-switch v-model:checked="configs.alipayEnabled" />
            </a-form-item>
            <a-form-item label="应用ID">
              <a-input 
                v-model:value="configs.alipayAppId" 
                placeholder="请输入支付宝应用ID"
              />
            </a-form-item>
            <a-form-item label="私钥">
              <a-textarea 
                v-model:value="configs.alipayPrivateKey" 
                placeholder="请输入支付宝私钥"
                :rows="3"
              />
            </a-form-item>

            <a-divider orientation="left">其他设置</a-divider>
            <a-form-item label="平台抽成比例">
              <a-input-number 
                v-model:value="configs.platformCommission" 
                :min="0"
                :max="100"
                :precision="1"
                addon-after="%"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="最小提现金额">
              <a-input-number 
                v-model:value="configs.minWithdrawAmount" 
                :min="0"
                :precision="2"
                addon-before="¥"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 短信设置 -->
        <a-tab-pane key="sms" tab="短信设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="启用短信">
              <a-switch v-model:checked="configs.smsEnabled" />
            </a-form-item>
            <a-form-item label="短信服务商">
              <a-select v-model:value="configs.smsProvider" style="width: 200px">
                <a-select-option value="aliyun">阿里云</a-select-option>
                <a-select-option value="tencent">腾讯云</a-select-option>
                <a-select-option value="huawei">华为云</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="AccessKey ID">
              <a-input 
                v-model:value="configs.smsAccessKeyId" 
                placeholder="请输入AccessKey ID"
              />
            </a-form-item>
            <a-form-item label="AccessKey Secret">
              <a-input-password 
                v-model:value="configs.smsAccessKeySecret" 
                placeholder="请输入AccessKey Secret"
              />
            </a-form-item>
            <a-form-item label="短信签名">
              <a-input 
                v-model:value="configs.smsSignName" 
                placeholder="请输入短信签名"
              />
            </a-form-item>
            <a-form-item label="验证码模板">
              <a-input 
                v-model:value="configs.smsCodeTemplate" 
                placeholder="请输入验证码模板ID"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 存储设置 -->
        <a-tab-pane key="storage" tab="存储设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-divider orientation="left">MinIO对象存储</a-divider>
            <a-form-item label="启用MinIO">
              <a-switch v-model:checked="configs.minioEnabled" />
            </a-form-item>
            <a-form-item label="服务地址">
              <a-input 
                v-model:value="configs.minioEndpoint" 
                placeholder="http://localhost:9000"
              />
            </a-form-item>
            <a-form-item label="Access Key">
              <a-input 
                v-model:value="configs.minioAccessKey" 
                placeholder="请输入MinIO Access Key"
              />
            </a-form-item>
            <a-form-item label="Secret Key">
              <a-input-password 
                v-model:value="configs.minioSecretKey" 
                placeholder="请输入MinIO Secret Key"
              />
            </a-form-item>
            <a-form-item label="存储桶名称">
              <a-input 
                v-model:value="configs.minioBucket" 
                placeholder="edu-platform"
              />
            </a-form-item>
            <a-form-item label="文件大小限制">
              <a-input-number 
                v-model:value="configs.maxFileSize" 
                :min="1"
                :max="100"
                addon-after="MB"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- AI设置 -->
        <a-tab-pane key="ai" tab="AI设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="启用AI功能">
              <a-switch v-model:checked="configs.aiEnabled" />
            </a-form-item>
            <a-form-item label="AI服务商">
              <a-select v-model:value="configs.aiProvider" style="width: 200px">
                <a-select-option value="qwen">通义千问</a-select-option>
                <a-select-option value="openai">OpenAI</a-select-option>
                <a-select-option value="baidu">百度文心</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="API Key">
              <a-input-password 
                v-model:value="configs.aiApiKey" 
                placeholder="请输入AI API Key"
              />
            </a-form-item>
            <a-form-item label="模型名称">
              <a-input 
                v-model:value="configs.aiModel" 
                placeholder="qwen-plus"
              />
            </a-form-item>
            <a-form-item label="温度参数">
              <a-slider 
                v-model:value="configs.aiTemperature" 
                :min="0"
                :max="1"
                :step="0.1"
                :marks="{ 0: '0', 0.5: '0.5', 1: '1' }"
              />
            </a-form-item>
            <a-form-item label="最大Token数">
              <a-input-number 
                v-model:value="configs.aiMaxTokens" 
                :min="100"
                :max="4000"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 安全设置 -->
        <a-tab-pane key="security" tab="安全设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-divider orientation="left">登录安全</a-divider>
            <a-form-item label="登录失败锁定">
              <a-switch v-model:checked="configs.loginLockEnabled" />
              <span style="margin-left: 10px; color: #999;">
                启用后，连续登录失败将锁定账户
              </span>
            </a-form-item>
            <a-form-item label="失败次数限制">
              <a-input-number 
                v-model:value="configs.maxLoginAttempts" 
                :min="3"
                :max="10"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="锁定时长">
              <a-input-number 
                v-model:value="configs.lockDuration" 
                :min="5"
                :max="60"
                addon-after="分钟"
                style="width: 200px"
              />
            </a-form-item>

            <a-divider orientation="left">Token设置</a-divider>
            <a-form-item label="Token有效期">
              <a-input-number 
                v-model:value="configs.tokenExpire" 
                :min="1"
                :max="90"
                addon-after="天"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="允许并发登录">
              <a-switch v-model:checked="configs.allowConcurrent" />
            </a-form-item>

            <a-divider orientation="left">验证码设置</a-divider>
            <a-form-item label="启用登录验证码">
              <a-switch v-model:checked="configs.captchaEnabled" />
            </a-form-item>
            <a-form-item label="验证码有效期">
              <a-input-number 
                v-model:value="configs.captchaExpire" 
                :min="1"
                :max="10"
                addon-after="分钟"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 通知设置 -->
        <a-tab-pane key="notification" tab="通知设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="邮件通知">
              <a-switch v-model:checked="configs.emailNotifyEnabled" />
            </a-form-item>
            <a-form-item label="短信通知">
              <a-switch v-model:checked="configs.smsNotifyEnabled" />
            </a-form-item>
            <a-form-item label="站内通知">
              <a-switch v-model:checked="configs.systemNotifyEnabled" />
            </a-form-item>
            <a-form-item label="推送通知">
              <a-switch v-model:checked="configs.pushNotifyEnabled" />
            </a-form-item>
            
            <a-divider orientation="left">通知场景配置</a-divider>
            <a-form-item label="新订单通知">
              <a-checkbox-group v-model:value="configs.newOrderNotify">
                <a-checkbox value="email">邮件</a-checkbox>
                <a-checkbox value="sms">短信</a-checkbox>
                <a-checkbox value="system">站内</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <a-form-item label="订单完成通知">
              <a-checkbox-group v-model:value="configs.orderCompleteNotify">
                <a-checkbox value="email">邮件</a-checkbox>
                <a-checkbox value="sms">短信</a-checkbox>
                <a-checkbox value="system">站内</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <a-form-item label="反馈回复通知">
              <a-checkbox-group v-model:value="configs.feedbackReplyNotify">
                <a-checkbox value="email">邮件</a-checkbox>
                <a-checkbox value="sms">短信</a-checkbox>
                <a-checkbox value="system">站内</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 审核设置 -->
        <a-tab-pane key="audit" tab="审核设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="教员自动审核">
              <a-switch v-model:checked="configs.autoAuditTeacher" />
              <span style="margin-left: 10px; color: #999;">
                关闭后需要人工审核
              </span>
            </a-form-item>
            <a-form-item label="实名认证要求">
              <a-switch v-model:checked="configs.requireIdentity" />
            </a-form-item>
            <a-form-item label="资质证书要求">
              <a-switch v-model:checked="configs.requireCertificate" />
            </a-form-item>
            <a-form-item label="审核超时自动通过">
              <a-switch v-model:checked="configs.autoPassOnTimeout" />
            </a-form-item>
            <a-form-item label="审核超时时长">
              <a-input-number 
                v-model:value="configs.auditTimeout" 
                :min="1"
                :max="30"
                addon-after="天"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 系统维护 -->
        <a-tab-pane key="maintenance" tab="系统维护">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="维护模式">
              <a-switch 
                v-model:checked="configs.maintenanceMode" 
                checked-children="开启"
                un-checked-children="关闭"
              />
              <a-alert 
                v-if="configs.maintenanceMode"
                message="维护模式已开启，普通用户将无法访问系统"
                type="warning"
                show-icon
                style="margin-top: 10px;"
              />
            </a-form-item>
            <a-form-item label="维护提示信息">
              <a-textarea 
                v-model:value="configs.maintenanceMessage" 
                placeholder="系统维护中，预计恢复时间..."
                :rows="3"
              />
            </a-form-item>

            <a-divider orientation="left">数据清理</a-divider>
            <a-form-item label="自动清理日志">
              <a-switch v-model:checked="configs.autoCleanLogs" />
            </a-form-item>
            <a-form-item label="日志保留天数">
              <a-input-number 
                v-model:value="configs.logRetentionDays" 
                :min="7"
                :max="365"
                addon-after="天"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="自动清理消息">
              <a-switch v-model:checked="configs.autoCleanMessages" />
            </a-form-item>
            <a-form-item label="消息保留天数">
              <a-input-number 
                v-model:value="configs.messageRetentionDays" 
                :min="30"
                :max="365"
                addon-after="天"
                style="width: 200px"
              />
            </a-form-item>

            <a-divider orientation="left">数据库备份</a-divider>
            <a-form-item label="自动备份">
              <a-switch v-model:checked="configs.autoBackup" />
            </a-form-item>
            <a-form-item label="备份频率">
              <a-select v-model:value="configs.backupFrequency" style="width: 200px">
                <a-select-option value="daily">每天</a-select-option>
                <a-select-option value="weekly">每周</a-select-option>
                <a-select-option value="monthly">每月</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="备份保留数量">
              <a-input-number 
                v-model:value="configs.backupRetention" 
                :min="1"
                :max="30"
                addon-after="份"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" @click="handleBackupNow">
                  立即备份
                </a-button>
                <a-button @click="handleViewBackups">
                  查看备份列表
                </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <!-- 其他设置 -->
        <a-tab-pane key="other" tab="其他设置">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
            <a-divider orientation="left">功能开关</a-divider>
            <a-form-item label="允许用户注册">
              <a-switch v-model:checked="configs.allowRegister" />
            </a-form-item>
            <a-form-item label="允许匿名浏览">
              <a-switch v-model:checked="configs.allowAnonymous" />
            </a-form-item>
            <a-form-item label="启用评论功能">
              <a-switch v-model:checked="configs.commentEnabled" />
            </a-form-item>
            <a-form-item label="启用推荐系统">
              <a-switch v-model:checked="configs.recommendEnabled" />
            </a-form-item>

            <a-divider orientation="left">内容审核</a-divider>
            <a-form-item label="内容自动审核">
              <a-switch v-model:checked="configs.autoContentReview" />
            </a-form-item>
            <a-form-item label="敏感词过滤">
              <a-switch v-model:checked="configs.sensitiveWordFilter" />
            </a-form-item>
            <a-form-item label="图片鉴黄">
              <a-switch v-model:checked="configs.imageContentCheck" />
            </a-form-item>

            <a-divider orientation="left">其他</a-divider>
            <a-form-item label="分页大小">
              <a-input-number 
                v-model:value="configs.pageSize" 
                :min="10"
                :max="100"
                addon-after="条/页"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="会话超时时间">
              <a-input-number 
                v-model:value="configs.sessionTimeout" 
                :min="5"
                :max="120"
                addon-after="分钟"
                style="width: 200px"
              />
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <!-- 操作按钮 -->
    <a-card class="action-card card-shadow" style="margin-top: 16px;">
      <a-space>
        <a-button type="primary" size="large" @click="handleSaveAll">
          <template #icon><save-outlined /></template>
          保存所有配置
        </a-button>
        <a-button size="large" @click="handleReset">
          <template #icon><undo-outlined /></template>
          恢复默认
        </a-button>
        <a-button size="large" @click="handleExport">
          <template #icon><download-outlined /></template>
          导出配置
        </a-button>
        <a-button size="large" @click="handleImport">
          <template #icon><upload-outlined /></template>
          导入配置
        </a-button>
      </a-space>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  ReloadOutlined,
  SaveOutlined,
  UndoOutlined,
  DownloadOutlined,
  UploadOutlined,
  PlusOutlined
} from '@ant-design/icons-vue'

const activeTab = ref('basic')

// 配置数据
const configs = reactive({
  // 基础设置
  siteName: '家教服务平台',
  siteLogo: '',
  servicePhone: '400-123-4567',
  serviceEmail: 'service@edu-platform.com',
  icp: '京ICP备12345678号',
  siteDescription: '专业的家教服务平台',
  
  // 支付设置
  wechatPayEnabled: true,
  wechatMerchantId: '',
  wechatApiKey: '',
  alipayEnabled: true,
  alipayAppId: '',
  alipayPrivateKey: '',
  platformCommission: 10.0,
  minWithdrawAmount: 100,
  
  // 短信设置
  smsEnabled: true,
  smsProvider: 'aliyun',
  smsAccessKeyId: '',
  smsAccessKeySecret: '',
  smsSignName: '家教平台',
  smsCodeTemplate: '',
  
  // 存储设置
  minioEnabled: true,
  minioEndpoint: 'http://localhost:9000',
  minioAccessKey: '',
  minioSecretKey: '',
  minioBucket: 'edu-platform',
  maxFileSize: 10,
  
  // AI设置
  aiEnabled: true,
  aiProvider: 'qwen',
  aiApiKey: '',
  aiModel: 'qwen-plus',
  aiTemperature: 0.7,
  aiMaxTokens: 2000,
  
  // 安全设置
  loginLockEnabled: true,
  maxLoginAttempts: 5,
  lockDuration: 30,
  tokenExpire: 30,
  allowConcurrent: true,
  captchaEnabled: true,
  captchaExpire: 5,
  
  // 通知设置
  emailNotifyEnabled: true,
  smsNotifyEnabled: true,
  systemNotifyEnabled: true,
  pushNotifyEnabled: false,
  newOrderNotify: ['system'],
  orderCompleteNotify: ['system'],
  feedbackReplyNotify: ['system', 'email'],
  
  // 审核设置
  autoAuditTeacher: false,
  requireIdentity: true,
  requireCertificate: false,
  autoPassOnTimeout: false,
  auditTimeout: 7,
  
  // 系统维护
  maintenanceMode: false,
  maintenanceMessage: '系统维护中，预计恢复时间：2025-10-28 00:00',
  autoCleanLogs: true,
  logRetentionDays: 30,
  autoCleanMessages: true,
  messageRetentionDays: 90,
  autoBackup: true,
  backupFrequency: 'daily',
  backupRetention: 7,
  
  // 其他设置
  allowRegister: true,
  allowAnonymous: false,
  commentEnabled: true,
  recommendEnabled: true,
  autoContentReview: true,
  sensitiveWordFilter: true,
  imageContentCheck: false,
  pageSize: 20,
  sessionTimeout: 30
})

// 初始化
onMounted(() => {
  loadConfigs()
})

// 加载配置
const loadConfigs = async () => {
  try {
    // TODO: 调用接口加载配置
    message.success('配置加载成功')
  } catch (error) {
    message.error('加载配置失败')
  }
}

// 刷新
const handleRefresh = () => {
  loadConfigs()
}

// 保存所有配置
const handleSaveAll = async () => {
  try {
    // TODO: 调用接口保存配置
    message.success('配置保存成功')
  } catch (error) {
    message.error('配置保存失败')
  }
}

// 恢复默认
const handleReset = () => {
  message.info('恢复默认配置功能开发中...')
}

// 导出配置
const handleExport = () => {
  const configJson = JSON.stringify(configs, null, 2)
  const blob = new Blob([configJson], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'system-config.json'
  a.click()
  URL.revokeObjectURL(url)
  message.success('配置导出成功')
}

// 导入配置
const handleImport = () => {
  message.info('导入配置功能开发中...')
}

// 立即备份
const handleBackupNow = () => {
  message.success('数据库备份任务已启动')
}

// 查看备份列表
const handleViewBackups = () => {
  message.info('查看备份列表功能开发中...')
}

// 文件上传前验证
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    message.error('只能上传图片文件!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('图片大小不能超过 2MB!')
  }
  return isImage && isLt2M
}
</script>

<style lang="scss" scoped>
.settings-page {
  .card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .action-card {
    text-align: center;
  }
}
</style>

